<!doctype html>
<html>
<head>
	<title>Autosizing Dataview to Content</title>
	<script src="../../../codebase/webix.js" type="text/javascript"></script>
	<link rel="STYLESHEET" type="text/css" href="../../../codebase/webix.css">

	<script src="../../common/testdata.js"></script>
	<style type="text/css">
		#dataA, #btnDiv{
			margin:20px;
		}
	</style>
<body>


	<div id="dataA" style="width:502px;"></div>
	<div id="btnDiv" style="width:500px;"></div>
    
	

	<script>
		webix.ready(function(){
			webix.ui({
				container:"btnDiv",
				cols:[
					{
						view: "button",
						value: "Narrow",
						width: 100,
						click:"$$('dataview1').define('width',250);  $$('dataview1').adjust()"
					},
					{
						view: "button",
						value: "Normal",
						width: 100,
						click:"$$('dataview1').define('width',500);  $$('dataview1').adjust();"
					},
					{
						view: "button",
						value: "Wide",
						width: 100,
						click:"$$('dataview1').define('width',1000);  $$('dataview1').adjust()"
					},
					{}
				]
			});

			webix.ui({
				container:"dataA",
				view:"dataview", id:"dataview1",
				autoheight:true,
				template:"<div class='webix_strong'>#title#</div> Year: #year#, rank: #rank#",
				type:{ width:250,height: 65 }

			});			
			$$("dataview1").parse([
				{ id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rating:9.2, rank:1},
				{ id:2, title:"The Godfather", year:1972, votes:511495, rating:9.2, rank:2},
				{ id:3, title:"The Godfather: Part II", year:1974, votes:319352, rating:9.0, rank:3},
				{ id:4, title:"The Good, the Bad and the Ugly", year:1966, votes:213030, rating:8.9, rank:4}
			]);

		});
	</script>


</body>
</html>
